<template>
    <div class="echarts-box">
        <div id="myEcharts" :style="{ width: width, height: height }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";

export default {
    name: "echartsgraph",
    props: ["width", "height", "array"],
    setup(props) {
        let myEcharts = echarts;
        let data1 = [];
        let data2 = [];
        let data3 = [];

        onMounted(() => {
            initData();
            initChart();
        });

        onUnmounted(() => {
            myEcharts.dispose;
        });

        function initData() {
            for (let i = 0; i < 6; i++) {
                data1.push(props.array[i][0]*-1);
                data2.push(props.array[i][1]);
                data3.push(props.array[i][2]);
            }
        }

        function initChart() {
            let chart = myEcharts.init(document.getElementById("myEcharts"), "");
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['损坏/维修', '库存', '已售']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: ['影像类', '康复类', '实验室类', '家庭类', '检测类', '治疗类']
                },
                series: [
                    {
                        name: '损坏/维修',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data1
                    },
                    {
                        name: '库存',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data2
                    },
                    {
                        name: '已售',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'left'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data3
                    }
                ]
            });

            window.onresize = function () {
                chart.resize();
            };
        }

        return {
            initChart
        };
    }
};
</script>

<style>
.echarts-box {
    margin-left: 150px;
}
</style>
